<!doctype html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, maximum-scale=1.0, initial-scale=1.0, user-scalable=0" />
    <title>商品列表</title>
    <link type="text/css" rel="stylesheet" href="./assets/css/style.css">
    <!--核心插件样式-->
    <link rel="stylesheet" href="./assets/css/notiflix.css">

    <!-- 上拉刷新加载插件 -->
    <link rel="stylesheet" href="./assets/css/mescroll.min.css">

    <!-- jquery  -->
    <script src="./assets/js/jquery.min.js"></script>

    <!-- axios  -->
    <script src="./assets/js/axios.min.js"></script>

    <!-- 提示插件 -->
    <script src="./assets/js/notiflix-1.3.0.min.js"></script>

    <!-- 请求接口封装文件 -->
    <script src="./util/request.js"></script>

    <!-- 上拉刷新加载插件 -->
    <script src="./assets/js/mescroll.min.js"></script>

    <style>
        .headerR .btn-right {
            position: absolute;
            top: 0;
            right: 0;
            line-height: 50px;
            text-align: center;
            width: 50px;
            color: #999999;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="headerbox">
        <div class="header">
            <div class="headerL">
                <a onclick="javascript:history.back(-1)" class="goback"><img src="./assets/images/goback.png" /></a>
            </div>
            <div class="headerC0">
                <div class="ssdiv">
                    <img src="./assets/images/ss.png" /><input type="text" id="keyword" placeholder="输入关键字..." />
                </div>
            </div>
            <div class="headerR">
                <p id="search" class="btn-right">搜索</p>
            </div>
        </div>
    </div>
    <div class="clear"></div>
    <div class="hbox" style="height:50px;"></div>
    <div class="mainWarp" style="background:#f3f3f3" id="mescroll">
        <ul class="proul" id="dataList">
            <li>
                <a href="detail.html"><img src="./assets/images/7.jpg" /></a>
                <a href="detail.html">
                    <p class="tit">北欧轻奢餐椅家用现代简约新中式洽谈酒店皮革软包餐厅椅子靠背椅</p>
                </a>
                <div class="price">
                    <p>￥2998<span>￥8999</span></p>
                </div>
            </li>
        </ul>
    </div>
    <div class="clear"></div>
    <div class="h54"></div>
    <div class="clear"></div>
    <div class="footerBox">
        <div class="footer">
            <ul>
                <li>
                    <a href="index.html">
                        <img src="./assets/images/f1.png">
                        <p>首页</p>
                    </a>
                </li>
                <li class="on">
                    <a href="list.html">
                        <img src="./assets/images/f02.png">
                        <p>分类</p>
                    </a>
                </li>
                <li>
                    <a href="gwc.html">
                        <img src="./assets/images/f3.png">
                        <p>购物车</p>
                    </a>
                </li>
                <li>
                    <a href="my.html">
                        <img src="./assets/images/f4.png">
                        <p>我的</p>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</body>

</html>
<script type="text/javascript">
    $(document).ready(function () {
        var height = $(document).height();
        height = height - 135;
        $('.mainWarp').css('height', height);
        //创建MeScroll对象,内部已默认开启下拉刷新,自动执行up.callback,重置列表数据;
        var mescroll = new MeScroll("mescroll", {
            down: {
                auto: false //是否在初始化完毕之后自动执行下拉回调callback; 默认true; (注: down的callback默认调用 mescroll.resetUpScroll(); )
                //					callback: function(mescroll) {
                //						mescroll.resetUpScroll(); //下拉刷新的回调,默认重置上拉加载列表为第一页
                //					},
            },
            up: {
                callback: getListData, //上拉回调,此处可简写; 相当于 callback: function (page) { getListData(page); }
                clearEmptyId: "dataList", //1.下拉刷新时会自动先清空此列表,再加入数据; 2.无任何数据时会在此列表自动提示空
                isBounce: false, //此处禁止ios回弹,解析(务必认真阅读,特别是最后一点): http://www.mescroll.com/qa.html#q10
                noMoreSize: 3, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
                empty: {
                    //列表第一页无任何数据时,显示的空提示布局; 需配置warpId或clearEmptyId才生效;
                    //warpId:null, //父布局的id; 如果此项有值,将不使用clearEmptyId的值;
                    icon: "../res/img/mescroll-empty.png", //图标,默认null
                    tip: "暂无商品列表", //提示
                    //						btntext: "去逛逛 >", //按钮,默认""
                    //						btnClick: function(){//点击按钮的回调,默认null
                    //							alert("点击了按钮,具体逻辑自行实现");
                    //						} 
                },
                toTop: { //配置回到顶部按钮
                    //src : "../res/img/mescroll-totop.png", //默认滚动到1000px显示,可配置offset修改
                    html: "<p>^<br/>顶部<p>", //标签内容,默认null; 如果同时设置了src,则优先取src
                    offset: 500
                },
                lazyLoad: {
                    use: true // 是否开启懒加载,默认false
                }
            }
        })
    })

    /*联网加载列表数据  page = {num:1, size:10}; num:当前页 从1开始, size:每页数据条数 */
    function getListData(page) {
        //联网加载数据
        getListDataFromNet(curWord, page.num, page.size, function (curPageData) {
            //联网成功的回调,隐藏下拉刷新和上拉加载的状态;
            //mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;
            console.log("page.num=" + page.num + ", page.size=" + page.size + ", curPageData.length=" +
                curPageData.length);

            //方法一(推荐): 后台接口有返回列表的总页数 totalPage
            //mescroll.endByPage(curPageData.length, totalPage); //必传参数(当前页的数据个数, 总页数)

            //方法二(推荐): 后台接口有返回列表的总数据量 totalSize
            //mescroll.endBySize(curPageData.length, totalSize); //必传参数(当前页的数据个数, 总数据量)

            //方法三(推荐): 您有其他方式知道是否有下一页 hasNext
            //mescroll.endSuccess(curPageData.length, hasNext); //必传参数(当前页的数据个数, 是否有下一页true/false)

            //方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据,如果传了hasNext,则翻到第二页即可显示无更多数据.
            mescroll.endSuccess(curPageData.length);

            //提示:curPageData.length必传的原因:
            // 1.判断是否有下一页的首要依据: 当传的值小于page.size时,则一定会认为无更多数据.
            // 2.比传入的totalPage, totalSize, hasNext具有更高的判断优先级
            // 3.使配置的noMoreSize生效

            //设置列表数据,因为配置了emptyClearId,第一页会清空dataList的数据,所以setListData应该写在最后;
            setListData(curPageData);
        }, function () {
            //联网失败的回调,隐藏下拉刷新和上拉加载的状态;
            mescroll.endErr();
        });
    }
</script>